<template>
	<view>
		<wxlogin v-model="showAuthorizationModal" @updated="updatedUserInfoEvent"></wxlogin>
	</view>
</template>

<script>
	import wxlogin from '@/components/wxlogin/wxlogin.vue'
	export default {
		components: { wxlogin },
		data() {
			return {
				showAuthorizationModal: true,
			}
		},
		methods: {
			// 打开获取用户信息弹框
			openAuthorizationModal() {
				this.showAuthorizationModal = true 
			},

			// 获取到的用户信息
			updatedUserInfoEvent(info) {
				console.log('获取到的用户信息', info)
				vk.userCenter.updateUser({
					data: {
						nickname: info.nickname,
						avatar: info.avatar
					},
					success: (data) => {
						// 成功后的逻辑
						vk.toast('修改成功');
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/Tabbar/my/my"
							})
						}, 1000)
					}
				});
			},
		}
	}
</script>

<style>
	.login-page {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 授权按钮 */
	.submit-btn {
		width: 86%;
		background-color: #05C160;
		color: #FFFFFF;
		margin-top: 60rpx;
		border-radius: 10rpx;
		padding: 25rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 530rpx 30rpx 0 30rpx;
	}

	.bindtext {
		background-color: #808080;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx;
	}

	.bindtext1 {
		margin-left: 10rpx;
		color: #fff;
		font-size: 26rpx;
	}

	.avatar-wrapper {
		width: 50%;
		background-color: #e6e6e6;
	}

	.avatar {
		border: 0;
		margin-top: 20rpx;
		border-radius: 50%;
		width: 220rpx;
		height: 220rpx;
	}

	.uni-input {
		align-self: center;
		padding-left: 30rpx;
		height: 100rpx;
		border-radius: 5%;
		background-color: #e6e6e6;
	}
</style>
